<template>
  <div>
    <a-button :disabled="!UrlCom" :icon="h(PlayCircleOutlined)" class="mt-4" type="primary"
              @click="handlePlayVideo">播放视频
    </a-button>
    <a-modal v-model:open="open" :footer="false" :maskClosable="true" :title="TitleCom" @cancel="handleCancel">
      <video ref="videoRef" class="w-full" controls loop>
        <source :src="UrlCom" />
      </video>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { computed, h, ref } from 'vue'
import { PlayCircleOutlined } from '@ant-design/icons-vue'


// 引用声明
const props = defineProps({

  row: {
    type: Object,
    required: true
  },

  fieldNames: {
    type: Object,
    default: () => {
      return {
        url: 'url',
        title: 'title'
      }
    }
  }
})


// 响应式数据
const videoRef = ref<HTMLVideoElement>()
const open = ref(false)


// 打开视频
const handlePlayVideo = () => {
  console.log(props.row)
  open.value = true
}


// 取消
const handleCancel = () => {
  console.log(videoRef.value.pause)
  videoRef.value.pause()
}


//标题
const TitleCom = computed(() => {
  return props.row[props.fieldNames.title]
})


//视频地址
const UrlCom = computed(() => {
  return props.row[props.fieldNames.url]
})


</script>
<style lang="scss" scoped>

</style>
